<script setup>
import console from 'console'
import { ref, onMounted, watch } from 'vue'
const isPlaying = ref(false)
const duration = ref('')
const props = defineProps({
  src: { type: String, required: true },
  value: { type: Boolean, required: true }
})
console.log(props)
const player = ref(null)
const emit = defineEmits(['input'])
const playAudioHandler = () => {
  isPlaying.value = !isPlaying.value
  /*   const player = this.$refs.audioPlayer */
  if (isPlaying.value) {
    player.value.load()
    player.value.play()
  } else {
    player.value.pause()
  }
  setTimeout(() => {
    isPlaying.value = false
    emit('input', false)
  }, (duration.value ? duration.value : 0) * 1000)
}
watch(
  () => duration.value,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
  }
)
onMounted(() => {
  player.value.load()
  player.value.oncanplay = function () {
    duration.value = Math.ceil(player.value.duration)
  }
})
</script>
<template>
  <div class="audio__wrap">
    <audio controls :src="src" ref="audioPlayer" style="display: none"></audio>
    <div class="self__audio" @click="playAudioHandler">
      <div class="audio__trigger">
        <div
          :class="{
            'wifi-symbol': true,
            'wifi-symbol--avtive': isPlaying
          }"
        >
          <div class="wifi-circle third"></div>
          <div class="wifi-circle second"></div>
          <div class="wifi-circle first"></div>
        </div>
      </div>
      <div class="audio__duration">{{ duration }}"</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.audio__wrap {
  .self__audio {
    .audio__duration {
      display: inline-block;
      line-height: 32px;
      height: 32px;
      padding-right: 6px;
      color: #888888;
    }
    .audio__trigger {
      cursor: pointer;
      vertical-align: top;
      display: inline-block;
      line-height: 32px;
      height: 32px;
      width: 100px;
      background-color: #e0effb;
      border-radius: 4px;
      position: relative;
      .wifi-symbol {
        position: absolute;
        left: 4px;
        top: -8px;
        width: 50px;
        height: 50px;
        box-sizing: border-box;
        overflow: hidden;
        transform: rotate(-225deg) scale(0.5);
        .wifi-circle {
          border: 5px solid #999999;
          border-radius: 50%;
          position: absolute;
        }

        .first {
          width: 5px;
          height: 5px;
          background: #cccccc;
          top: 45px;
          left: 45px;
        }
        .second {
          width: 25px;
          height: 25px;
          top: 35px;
          left: 35px;
        }
        .third {
          width: 40px;
          height: 40px;
          top: 25px;
          left: 25px;
        }
      }
      .wifi-symbol--avtive {
        .second {
          animation: bounce 1s infinite 0.2s;
        }
        .third {
          animation: bounce 1s infinite 0.4s;
        }
      }
    }
    @keyframes bounce {
      0% {
        opacity: 0; /*初始状态 透明度为0*/
      }
      100% {
        opacity: 1; /*结尾状态 透明度为1*/
      }
    }
  }
}
</style>
